<template>
  <el-table
    class="table-web"
    ref="table"
    :data="data"
    stripe
    :table-layout="tableLayout"
    :border="false"
    :span-method="objectSpanMethod"
    :style="{ width: '100%', height: 'auto' }"
    :max-height="props.maxHeight"
    :highlight-current-row="true"
    :row-class-name="tableRowClassName"
    :header-cell-style="{
      background: bgColor,
      color: color,
      fontSize: '14px'
    }"
    :empty-text="emptyText"
    :show-summary="showSummary"
    :summary-method="summaryMethods"
    @row-click="rowClick"
    @selection-change="selectionChange"
    @select="select"
    @selectAll="selectAll"
    @sort-change="sortChange"
  >
    <!-- :summary-method="summaryMethods" -->
    <!-- <template #empty>
      <div class="empty">
        <img width="50" src="@/assets/img/common/empty.png" />
        <span>暂无数据</span>
      </div>
    </template> -->
    <template #empty>
      <div class="empty mt-30px">
        <img width="60" src="../../assets/img/common/empty.png" />
        <span>暂无数据</span>
      </div>
    </template>
    <!-- 多选框 -->
    <el-table-column
      v-if="selection"
      type="selection"
      width="40"
      :selectable="checkboxSelect"
      fixed="left"
    />
    <!-- 序号 -->
    <el-table-column
      v-if="indexT"
      type="index"
      width="60px"
      label="序号"
      fixed="left"
      :align="columnClass"
      :header-align="headColumnClass"
    />

    <!-- 业务逻辑代码 -->
    <el-table-column
      v-for="(item, index) in column"
      :key="index"
      :prop="item.prop"
      :sortable="item.sortable"
      :label="item.label"
      :width="item.width"
      :header-align=" item.type === 'option'
            ? 'center' :
        item.headColumnClass ? item.headColumnClass : headColumnClass
      "
      :align=" item.type === 'option'
            ? 'center' : item.columnClass ? item.columnClass : columnClass"
      :class-name="'tui-' + columnClass"
      :show-overflow-tooltip="
        item.type === 'option' || item.type === 'custom' ? false : true
      "
      :fixed="item.fixed"
    >
      <template v-if="item.header" #header>
        <slot name="tableHeader" />
      </template>
      <!-- 非嵌套表头 -->
      <template v-if="!item.children" v-slot="scope">
        <!-- formatTag: 1.是否类型（1.success 2.danger） 2.文本类型() -->
        <div v-if="item.type === 'tag'">
          <!-- boolean format -->
          <el-tag
            v-if="item.formatCode == 'boolean'"
            :type="scope.row[item.prop] == 1 ? 'default' : 'danger'"
          >
            {{ scope.row[item.prop] == 1 ? '是' : '否' }}
          </el-tag>

          <!-- 需要用后端code format-->
          <el-tag v-else :type="formatTagType(item.prop, scope.row[item.prop])">
            {{ formatCode(item.formatCode, scope.row[item.prop]) }}
          </el-tag>
        </div>
        <!-- 开关 -->
        <slot
          v-else-if="item.type === 'switch'"
          name="switch"
          :row="scope.row"
        />
        <!-- 自定义内容 -->
        <slot
          v-else-if="item.type === 'custom'"
          name="custom"
          :row="scope.row"
        />
        <!-- 数字千分位 -->
        <span
          v-else-if="item.type === 'formatNumber'"
          v-money="scope.row[item.prop]"
        />
        <!-- 时间格式 -->
        <span v-else-if="item.type === 'time'">
          {{ formatTime(scope.row[item.prop], item.timeType) }}
        </span>
        <!-- 普通formart 前端固定的key-value -->
        <span v-else-if="item.type === 'format'">
          {{ formatCode(item.formatCode, scope.row[item.prop]) }}
        </span>
        <!-- 对象 -->
        <slot v-else-if="item.type === 'obj'" name="obj">
          {{ scope.row[item.prop][item.name] }}
        </slot>
        <!-- 两层对象 -->
        <slot v-else-if="item.type === 'obj2'" name="obj">
          {{ scope.row[item.prop][item.prop1][item.name] }}
        </slot>
        <slot v-else-if="item.type === 'formatObj'" name="obj">
          {{
            formatDictCode(item.formatCode, scope.row[item.prop][item.prop1])
          }}
        </slot>
        <span
          v-else-if="item.type === 'formatDict'"
          :class="calFontColor(item.color, scope.row[item.prop])"
        >
          {{ formatDictCode(item.formatCode, scope.row[item.prop]) }}
          <!-- <span v-html="formatDictCode( item.formatCode, scope.row[item.prop])" /> -->
        </span>
        <!-- slot -->
        <slot
          v-else-if="item.slot"
          :name="item.slot"
          :row="scope.row"
          :index="scope.$index"
          :prop="item.prop"
        />
        <!-- 操作按钮通过插槽控制 -->
        <slot
          v-else-if="item.type === 'option'"
          name="option"
          :row="scope.row"
        />

        <!-- 正常数据展示 -->
        <span v-else>
          {{
            (scope.row && scope.row[item.prop]) ||
            formatDefault(scope.row[item.prop])
          }}
        </span>
      </template>
      <!-- 嵌套表头 -->
      <template v-slot="scope" v-else="item.children">
        <el-table-column
          v-for="(item1, index1) in item.children"
          :key="index1"
          :prop="item1.prop"
          :label="item1.label"
          :width="item1.width"
          :align="columnClass"
          :class-name="'tui-' + columnClass"
          :show-overflow-tooltip="item1.showToolTip"
          :fixed="item1.fixed"
        >
          <template v-slot="scope">
            <div v-if="item1.type === 'tag'">
              <!-- boolean format -->
              <el-tag
                v-if="item.formatCode == 'boolean'"
                :type="scope.row[item.prop] == 1 ? 'default' : 'danger'"
              >
                {{ scope.row[item.prop] == 1 ? '是' : '否' }}
              </el-tag>

              <!-- 需要用后端code format-->
              <el-tag
                v-else
                :type="formatTagType(item.prop, scope.row[item.prop])"
              >
                {{ formatCode(item.formatCode, scope.row[item.prop]) }}
              </el-tag>
            </div>
            <!-- 开关 -->
            <slot
              v-else-if="item1.type === 'switch'"
              name="switch"
              :row="scope.row"
            />
            <!-- 自定义内容 -->
            <slot
              v-else-if="item1.type === 'custom'"
              name="custom"
              :row="scope.row"
            />
            <!-- 数字千分位 -->
            <span
              v-else-if="item.type === 'number'"
              v-money="scope.row[item.prop]"
            />
            <!-- 时间格式 -->
            <span v-else-if="item1.type === 'time'">
              {{ formatTime(scope.row[item.prop], item.timeType) }}
            </span>
            <!-- 普通formart 前端固定的key-value -->
            <span v-else-if="item1.type === 'format'">
              {{ formatCode(item.formatCode, scope.row[item.prop]) }}
            </span>
            <!-- 对象 -->
            <slot v-else-if="item1.type === 'obj'" name="obj">
              {{ scope.row[item.prop][item.name] }}
            </slot>
            <!-- 两层对象 -->
            <slot v-else-if="item1.type === 'obj2'" name="obj">
              {{ scope.row[item.prop][item.prop1][item.name] }}
            </slot>
            <slot v-else-if="item1.type === 'formatObj'" name="obj">
              {{
                formatDictCode(
                  item.formatCode,
                  scope.row[item.prop][item.prop1]
                )
              }}
            </slot>
            <span
              v-else-if="item1.type === 'formatDict'"
              :class="calFontColor(item.color, scope.row[item1.prop])"
            >
              {{ formatDictCode(item.formatCode, scope.row[item1.prop]) }}
              <!-- <span v-html="formatDictCode( item.formatCode, scope.row[item.prop])" /> -->
            </span>
            <!-- slot -->
            <slot
              v-else-if="item1.slot"
              :name="item1.slot"
              :row="scope.row"
              :index="scope.$index"
              :prop="item1.prop"
            />
            <!-- 操作按钮通过插槽控制 -->
            <slot
              v-else-if="item1.type === 'option'"
              name="option"
              :row="scope.row"
            />

            <!-- 正常数据展示 -->
            <span v-else>
              {{
                (scope.row && scope.row[item1.prop]) ||
                formatDefault(scope.row[item1.prop])
              }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import dayjs from 'dayjs'
import { dictStore } from '@/pinia/modules/dict'
import { number } from 'echarts'
const dictStoreData = dictStore()

const auditStatusTag = {
  1: 'default',
  2: 'warning',
  3: 'danger',
  4: 'success',
  5: 'success',
  6: 'success'
}
let isFixed = ref('absolute')

const props = defineProps({
  isSummaryLastIndex: {
    type: Boolean,
    default() {
      return false
    }
  },
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  showSummary: {
    type: Boolean,
    default() {
      return false
    }
  },
  tableSummaryUnits: {
    type: Array,
    default() {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /* 选中行坐标，默认不选中 */
  getIndex: {
    type: Number,
    default: () => {
      return -1
    }
  },
  /* 多选框展示 */
  selection: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /* 列名 */
  columnClass: {
    type: String,
    default: 'left'
  },
  // 头部列名
  headColumnClass: {
    type: String,
    default: 'left'
  },
  /* head背景色 */
  bgColor: {
    type: String,
    default: () => {
      return '#F4F9FF'
    }
  },
  /* head字体颜色 */
  color: {
    type: String,
    default: () => {
      return '#2982E6'
    }
  },
  /* content表格高度 */
  height: {
    type: String,
    default: () => {
      return 'calc(100%)'
      // return 'calc(100% - 30px)'
    }
  },
  // 最大高度
  maxHeight: {
    type: [String, Number]
  },
  /* 序号列表是否展示，默认不展示 */
  indexT: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /* 列表展示结果 */
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  /* head内容 */
  column: {
    type: Array,
    default: () => {
      return [
        { label: '测试1', prop: 'name' },
        { label: '测试2', prop: 'size' },
        { label: '测试3', prop: 'size' },
        { label: '测试4', prop: 'size' }
      ]
    }
  },
  // 默认家庭床位填报统计总计
  summary_type: {
    type: String,
    default: () => {
      return 'JTCWTBTJ'
    }
  },
  tableLayout: {
    type: String,
    default: () => {
      return 'fixed'
    }
  },
  selectable: {
    type: String
  }
})

const formatDefault = val => {
  return val === 0 || (val && val.length) ? val : '--'
}
const table = ref(null)
defineExpose({
  table: table
})

const checkboxSelect = (row, rowIndex) => {
  if (props.selectable == 'PLGS') {
    if (row.publicStatus == 0) {
      return true // 不禁用
    } else {
      return false // 禁用
    }
  } else {
    return true
  }
}

const tableHeight = computed(() => {
  if (props.height === 'auto') {
    isFixed.value = 'static'
    return 'auto'
  } else {
    return '100%'
  }
})

// watch([data],(newValue,oldValue)=>{
// 	console.log(newValue,oldValue)
// })

const calFontColor = (color, val) => {
  if (color && val == 0) {
    return 'error'
  }
  return false
}
const formatTime = (val, type) => {
  return val ? dayjs(val).format(type) : ' - '
}

const FRONT_CODE = {
  
}
// 前端写死的map key value
const formatCode = (code, val) => {
  return FRONT_CODE[code][val]
}
const formatDictCode = (code, val) => {
  // eslint-disable-next-line eqeqeq
  const target = dictStoreData.dict?.find(item => item.code == code)
  if (target && (val || val === 0 || val === '0')) {
    // if (Array.isArray(val)) {
    // 如果是数组
    let res = ''
    val
      .toString()
      .split(',')
      .forEach((item, index) => {
        // eslint-disable-next-line eqeqeq
        const a = target.children.find(item1 => item1.code == item)
        if (a) {
          res += `${index === 0 ? '' : ','}${a.name}`
        } else {
          res += ''
        }
        // eslint-disable-next-line eqeqeq
      })
    return res
  }
  return '--'
}
const formatTagType = (name, val) => {
  if (name === 'auditStatus') {
    return auditStatusTag[val]
  }
  return 'default'
}
/**
 * @description:
 * @param {type}
 * @return {type}
 */
const formart = (item, row, prop) => {
  return item.method(row, prop)
}
// 格式化字体颜色
const formatColorClass = (item, row, prop) => {
  return item.formatColorClass(row, prop)
}
/**
 * @description: 自动选中行样式更改
 * @param {type}
 * @return:
 */
const tableRowClassName = ({ row, rowIndex }) => {
  if (row) {
    row.index = rowIndex
    if (props.getIndex !== -1 && row.index === props.getIndex - 1) {
      return 'current-row'
    }
  }
}

const emit = defineEmits([
  'row',
  'select',
  'selectAll',
  'selectItem',
  'sortChangeTable'
])
/**
 * @description: 当行被点击
 * @param {type}
 * @return:
 */
const rowClick = val => {
  emit('row', val)
}

/**
 * @description: 多选
 * @param {type}
 * @return:
 */
const selectionChange = val => {
  emit('select', val)
}

const select = (arr, item) => {
  emit('selectItem', arr, item)
}

const selectAll = val => {
  emit('selectAll', val)
}

// 排序
const sortChange = val => {
  emit('sortChangeTable', val)
}

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (props.isSummaryLastIndex) {
    if (rowIndex === props.data.length - 1) {
      // 处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示
      if (columnIndex === 1) {
        // 定位到最后一行，告诉该单元格合并1行2列
        return [1, 4]
      } else if (columnIndex === 1) {
        // 定位到6行1列的姓名，告诉该单元格不显示
        return [0, 0]
      }
    }
  }
}

/**
 * 格式化标底的summary
 */
const summaryMethods = params => {
  const { columns, data } = params
  const sums = []
  columns.forEach((column, index) => {
    if (props.summary_type == 'SKMXD') {
      if (index === 0) {
        sums[index] = '金额合计'
        return
      }
      // else if (index === 1) {
      //   sums[index] = data !== null ? data.length + '所' : '-'
      //   return
      // }
      if (data && data.length !== 0) {
        console.log(column)
        const values = data.map(item => Number(item[column.property]))
        console.log(values)
        if (!values.every(value => isNaN(value))) {
          if (index == 1) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ' 元'
          }
        } else {
          sums[index] = ''
        }
      }
    }
    if (props.summary_type == 'BTZJHB') {
      if (index === 0) {
        // sums[index] = '总计:'
        sums[index] = data !== null ? '总计：' + data.length + '家' : '-'
        return
      }
      if (
        index === 1 ||
        index === 4 ||
        index === 11 ||
        index === 9 ||
        index === 10
      ) {
        sums[index] = '-'
        return
      }
      if (data && data.length !== 0) {
        console.log(column)
        const values = data.map(item => Number(item[column.property]))
        console.log(values)
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index]
        } else {
          sums[index] = 'N/A'
        }
      }
    }
  })
  return sums
}
</script>
<style lang="scss" scoped>
.table-web {
  width: 100%;
  position: static;
  /* height: calc(100% - 50px) */
}
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 14px;
  padding: 30px 0;
}
.emptyText {
  margin-left: 10px;
}
.error {
  color: red;
}
.table-web {
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
  }
  :deep(.el-button + .el-button) {
    margin-left: 19px !important;
  }
  :deep(.el-button--success) {
    // color: var(--el-color-success) !important;
    // &:hover {
    //   color: var(--el-color-success) !important;
    // }

    color: var(--el-color-primary) !important;
    &:hover {
      color: var(--el-color-primary) !important;
    }
  }
  :deep(.el-button--primary) {
    color: var(--el-color-primary) !important;
    &:hover {
      color: var(--el-color-primary) !important;
    }
  }
  :deep(.el-button--danger) {
    // color: var(--el-color-danger) !important;
    // &:hover {
    //   color: var(--el-color-danger) !important;
    // }
    color: var(--el-color-primary) !important;
    &:hover {
      color: var(--el-color-primary) !important;
    }
  }
}
:deep(.el-popper) {
  max-width: 400px !important;
}
</style>
